Skip to content

feat: MUSD-741, MUSD-743, MUSD-744 — Money Home header polish + tab bar#29645

Merged
Kureev merged 20 commits into
mainfrom
kureev/MUSD-741-743-money-home-header
May 6, 2026
Merged

feat: MUSD-741, MUSD-743, MUSD-744 — Money Home header polish + tab bar#29645
Kureev merged 20 commits into
mainfrom
kureev/MUSD-741-743-money-home-header

Conversation

@Kureev
Copy link
Copy Markdown
Contributor

@Kureev Kureev commented May 4, 2026

Description

Bundle of polish items on the Money Home screen.

  • MUSD-741 migrates the "X% APY" pill in the Money Home header from a hand-rolled Box + Text to the MMDS Tag component (severity = success), and bumps the inner text from BodySm (14px) to BodyMd (16px) so yield reads as a primary value prop.
  • MUSD-743 removes the back chevron from the Money Home header. With Money now a top-level tab destination, the back button was misleading; the kebab on the right naturally aligns with the title via HeaderStandard's built-in layout.
  • MUSD-744 renders the global wallet action bar at the bottom of Money Home so the screen functions as a proper tab destination instead of a dead-end. Concretely:
    • The Money Tab.Screen is registered as Routes.MONEY.ROOT (instead of Routes.MONEY.HOME) and wired to MoneyScreenStack. This matches the existing TabBar handler which navigates to Routes.MONEY.ROOT, { screen: Routes.MONEY.HOME } — so the tab mounts with its inner stack and the global tab bar stays visible.
    • The outer Stack.Screen for Routes.MONEY.ROOT (which was pushing above HomeTabs and hiding the tab bar) is removed from MainNavigator.
    • All changes are inside app/components/Nav/Main/MainNavigator.js — no design-system-owned files are touched.
    • MoneyFooter ("Add money" CTA) was unpinned from its sticky-bottom position and now flows inside the ScrollView content as a normal section (px-4 py-3), with a single Divider above it (matching the section rhythm) and paddingBottom: 40 on the scroll content. MUSD-747 will reintroduce sticky behaviour with peek-and-hide based on the onboarding stepper's viewport state.

No analytics changes, no copy changes, no behavioural changes outside the navigation rewiring described above.

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: Money Home header polish + tab bar visibility

  Scenario: user opens Money Home via the bottom tab
    Given the Money Account feature flag is enabled
    When the user taps the Money tab in the bottom navigation
    Then Money Home renders with the global tab bar visible at the bottom
    And the "Money" tab is shown as active
    And no back chevron is rendered in the Money Home header
    And the options (kebab) icon sits in the top-right
    And the "X% APY" pill is rendered as an MMDS Tag at 16px text

  Scenario: Add money button placement
    Given Money Home is open
    When the user scrolls to the bottom of the page
    Then the "Add money" button renders inside the scroll content as the last section
    And it is preceded by the standard section divider
    And it has visible breathing room before the global tab bar

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
  • I've tested with a power user scenario
  • I've instrumented key operations with Sentry traces for production performance metrics

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Medium Risk
Moderate risk due to navigation rewiring (Money tab now routes to Routes.MONEY.ROOT/MoneyScreenStack and a stack-level screen is removed), which could affect tab routing and back-stack behavior. UI/layout changes are otherwise straightforward and covered by updated tests.

Overview
Makes Money a first-class bottom-tab destination by switching the conditional tab registration from Routes.MONEY.HOME to Routes.MONEY.ROOT and mounting MoneyScreenStack directly, while removing the extra Routes.MONEY.ROOT stack screen that previously sat above HomeTabs (keeping the global tab bar visible).

Polishes Money Home UI: replaces the APY pill with the design-system Tag, updates the header to a title+menu-only HeaderBase (removing the back button), and simplifies the “Add money” footer from an animated/sticky overlay to a normal scroll section with fixed bottom padding; associated peek/hide stepper logic and its unit tests are deleted and component tests are updated accordingly.

Reviewed by Cursor Bugbot for commit a742e0d. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 4, 2026

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@github-actions github-actions Bot added the size-S label May 4, 2026
@Kureev Kureev self-assigned this May 4, 2026
@Kureev Kureev changed the title feat: MUSD-741, MUSD-743 — Money Home header polish feat: MUSD-741, MUSD-743, MUSD-744 — Money Home header polish + tab bar May 4, 2026
@github-actions github-actions Bot added size-M and removed size-S labels May 4, 2026
Copy link
Copy Markdown
Contributor Author

@Kureev Kureev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me try to rework it in a way we don't need review from DS engineers

@Kureev Kureev marked this pull request as ready for review May 4, 2026 12:55
@Kureev Kureev requested a review from a team as a code owner May 4, 2026 12:55
Comment thread app/components/UI/Money/components/MoneyFooter/MoneyFooter.tsx
Kureev added 11 commits May 5, 2026 11:40
MUSD-743: drop the back button from Money Home header — the screen is a
top-level tab destination, so the back chevron was misleading.
MUSD-741: migrate the APY pill from a hand-rolled Box+Text to the MMDS
Tag component and bump text to BodyMd (16px) for stronger emphasis.
Wire Money Tab.Screen to MoneyScreenStack (was WalletTabModalFlow stub) and update TabBar tap handler to navigate to the tab instead of pushing Routes.MONEY.ROOT, so the tab bar stays visible on Money Home and the back-button removal in MUSD-743 doesn't dead-end the screen.
… visible

Switch the wallet-home Cash section from pushing the outer Routes.MONEY.ROOT
stack to navigating directly to the Money tab. Without this, MoneyScreenStack
mounted above HomeTabs and the global tab bar disappeared, leaving Money Home
as a dead-end after MUSD-743 dropped the back button.
… tab bar

With the global tab bar now visible on Money Home, the always-on MoneyFooter
Add money button stacked on top of it. Drop the render here; the design
intent is for the Add money CTA to live inside the "Fund your account" card
in the empty state, not as a sticky footer. MUSD-747 will reintroduce the
footer conditionally with peek-and-hide behaviour.
The always-on MoneyFooter rendered as a sticky overlay at the bottom of
Money Home, which now stacks on top of the new global tab bar. Move the
footer button into the ScrollView's content container as the last child
and strip the safe-area / absolute positioning that pinned it. The button
stays visible at the bottom of the scrollable list; it just no longer
overlays the tab bar. MUSD-747 will reintroduce sticky behaviour with
peek-and-hide based on the onboarding stepper's viewport state.
The always-on MoneyFooter sat as a sticky overlay at the bottom of Money
Home, which stacked on top of the new global tab bar. Move the footer
inside the ScrollView content as the last child, strip the absolute /
safe-area positioning, and add vertical margin so the button has space
both from the previous section and from the tab bar below. MUSD-747 will
reintroduce sticky behaviour with peek-and-hide based on the onboarding
stepper's viewport state.

Spacing decision: use Divider components above and below MoneyFooter to
match the consistent my-5 rhythm used between all other Money Home
sections. The footer wrapper uses px-4 py-3 — identical to MoneyEarnings
and other section components — so the button is bracketed by dividers
exactly like every other section on the page.
The previous commit added a leading Divider before MoneyFooter that
caused a double-divider in the isMilestone path (MoneyCondensedInfoCards
already had a trailing Divider). Move the leading Divider inside the
!isMilestone block so MoneyWhatYouGet gets a trailing Divider, giving
both state paths exactly one Divider above and one below MoneyFooter —
matching the consistent my-5 rhythm shared by every other section.
…ttom

The visible 1px line of the trailing Divider after MoneyFooter was
removed in favour of paddingBottom: 40 on the scroll content, which
preserves the equivalent vertical spacing (matching the combined my-5
margin of a Divider) without rendering a visible separator at the very
bottom of the page. Consistent with MoneyHowItWorksView's pattern of
using contentContainerStyle paddingBottom for bottom-of-scroll breathing
room.
The Money tab was using IconName.Bank (building icon); the Figma design
shows a $-in-circle ("coin") icon. IconName.Coin already exists in the
icon set and matches the design exactly — both for the inactive (outline)
and active (filled) states, with the standard tab-icon styling.
Reverts all changes to app/component-library/components/Navigation/TabBar/*
and to useCashNavigation so this PR no longer triggers
@MetaMask/design-system-engineers CODEOWNERS review, and so the
CashSection.test.tsx test that asserts the original navigate signature
passes again.

The tab bar stays visible on Money Home because the Money Tab.Screen is
now registered as Routes.MONEY.ROOT (instead of Routes.MONEY.HOME), and
the outer Stack.Screen for Routes.MONEY.ROOT is removed. The original
TabBar handler navigate(Routes.MONEY.ROOT, { screen: Routes.MONEY.HOME })
resolves to the tab itself with the inner stack's initial screen, so the
global tab bar stays mounted.

Side effect: the Money tab icon reverts to IconName.Bank. The IconName.Coin
swap will land in a separate small DS-owned PR.
After moving MoneyScreenStack from a top-level Stack.Screen into a
Tab.Screen inside HomeTabs, the conditional-rendering test could no
longer find Routes.MONEY.ROOT among the outer Stack navigator's
direct children. Render HomeTabs separately (mirroring the existing
getHomeTabsComponent helper) and inspect the TabNavigator's children
to assert the Money route is registered when the feature flag is on
and absent when it is off.
@Kureev Kureev force-pushed the kureev/MUSD-741-743-money-home-header branch from 81a4b8f to be2bcf0 Compare May 5, 2026 09:40

const MoneyHeader = ({ onBackPress, onMenuPress }: MoneyHeaderProps) => (
const MoneyHeader = ({ onMenuPress }: MoneyHeaderProps) => (
<HeaderStandard
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The options menu button is not aligned with the header text.

image

Comment thread app/components/UI/Money/components/MoneyFooter/MoneyFooter.tsx
{isMoneyHomeScreenEnabled ? (
<Tab.Screen
name={Routes.MONEY.HOME}
name={Routes.MONEY.ROOT}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add initialRouteName={Routes.MONEY.HOME] to the MoneyScreenStack. This way we explicitly navigate to the home screen first. Right now this behaviour is implicit due to the Money Home route being first in the list.

@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented May 6, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.98%. Comparing base (dba2c63) to head (01598d3).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #29645      +/-   ##
==========================================
+ Coverage   81.97%   81.98%   +0.01%     
==========================================
  Files        5302     5305       +3     
  Lines      140763   140978     +215     
  Branches    32047    32095      +48     
==========================================
+ Hits       115391   115586     +195     
- Misses      17517    17528      +11     
- Partials     7855     7864       +9     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Matt561 Matt561 self-requested a review May 6, 2026 15:36
Kureev added 3 commits May 6, 2026 17:46
The Compact variant of HeaderStandard centers the title; switch to
Display so the "Money" heading sits on the left as in the original
design while keeping the kebab menu on the right.
HeaderStandard wraps the title prop in a BoxColumn with alignItems
Center, which forces the title to center regardless of the parent
HeaderBaseVariant. Switch to HeaderBase directly with the title as a
string child; HeaderBaseVariant.Display then renders it left-aligned
with HeadingLg. Replaces the previous attempt that only flipped the
variant without escaping HeaderStandard's centering wrap.
HeaderBase has no default side padding (HeaderStandard's px-2 wasn't
inherited when we switched). Add twClassName="px-4" so the title sits
16px from the left and the kebab 16px from the right, matching the
section rhythm of the rest of Money Home.
@Kureev
Copy link
Copy Markdown
Contributor Author

Kureev commented May 6, 2026

image

@Kureev Kureev enabled auto-merge May 6, 2026 16:22
Matt561
Matt561 previously approved these changes May 6, 2026
@Kureev Kureev added this pull request to the merge queue May 6, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks May 6, 2026
@Kureev Kureev added this pull request to the merge queue May 6, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to a conflict with the base branch May 6, 2026
@Kureev Kureev enabled auto-merge May 6, 2026 17:54
…oney-home-header

# Conflicts:
#	app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.styles.ts
#	app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.tsx
…placement

The peek-and-hide overlay introduced by MUSD-747 (#29736) is no longer
desired on Money home. Restores the simpler pre-MUSD-747 layout where
MoneyFooter renders as a plain ScrollView sibling that sits at the
bottom of the screen.

- MoneyHomeView.tsx: remove Animated/reanimated wiring, footer/stepper
  layout refs, scroll-driven visibility computation, and the Box
  onLayout wrapper around MoneyOnboardingCard. ScrollView no longer
  needs onScroll/onLayout/scrollEventThrottle.
- MoneyHomeView.styles.ts: drop footerOverlay; restore scrollContent
  with paddingBottom 0 for the static layout.
- Delete utils/computeStepperVisibility.{ts,test.ts} — no longer used.
- MoneyHomeView.test.tsx: remove the 11 peek-and-hide tests; drop now
  unused act and ReactTestInstance imports.
@github-actions github-actions Bot added size-L and removed size-M labels May 6, 2026
Copy link
Copy Markdown
Contributor

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 488d5e6. Configure here.

Comment thread app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.tsx Outdated
Move MoneyFooter inside the ScrollView so it scrolls with the rest of
the page content rather than sticking at the bottom of the screen.
Bumps scrollContent paddingBottom to 40 for breathing room below the
button.
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 6, 2026

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeMoney
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: medium
  • AI Confidence: 88%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are focused on the MetaMask Card (Money) feature:

  1. MainNavigator.js: Navigation restructuring - Routes.MONEY.HOME is now the tab screen name directly (previously Routes.MONEY.ROOT), and MoneyScreenStack is now the direct tab component. The separate Routes.MONEY.ROOT stack screen is removed. This is a significant navigation change that could affect how the Card/Money screen is accessed.

  2. MoneyHomeView.tsx: Major refactoring - removed scroll-based animated footer (Animated.View with translateY), removed stepper visibility logic, removed back button handler, simplified layout. Footer is now inline in ScrollView.

  3. MoneyHeader.tsx: Changed from HeaderStandard (with back button) to HeaderBase (display variant, no back button). Removed onBackPress prop. Added title text.

  4. MoneyBalanceSummary.tsx: Removed title from balance summary (moved to header), changed APY tag from custom Box to Tag component.

  5. MoneyFooter.tsx: Simplified - removed safe area insets, removed styles.

  6. MoneyHomeView.styles.ts: Replaced footerOverlay with scrollContent padding.

  7. Test ID changes: BACK_BUTTONTITLE in MoneyHeader, removed TITLE from MoneyBalanceSummary.

  8. routes/index.tsx: Added initialRouteName to MoneyScreenStack navigator.

All changes are scoped to the Money/Card feature. The E2E tests for SmokeMoney (card-button.spec.ts, card-home-add-funds.spec.ts) test navigation to the Card home screen and add funds flow - these need to be validated against the navigation restructuring in MainNavigator.js. The cardViewTitle used in E2E tests maps to CardHomeSelectors.CARD_VIEW_TITLE from the separate Card component (not MoneyHeader), so that specific test ID is unaffected. However, the navigation path changes warrant running SmokeMoney tests to verify the card screen is still accessible via the navbar button.

No other feature areas are impacted - the changes don't touch shared navigation components, confirmations, accounts, or other wallet features.

Performance Test Selection:
The changes simplify the MoneyHomeView by removing scroll-based animations (Animated.View with translateY, useSharedValue, useAnimatedStyle) and replacing with a simpler static layout. While this could theoretically improve performance by removing animation overhead, the changes are scoped to the Money/Card feature which is gated by a feature flag and not covered by any existing performance test tags. No performance test tags are relevant here.

View GitHub Actions results

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented May 6, 2026

@Kureev Kureev requested a review from Matt561 May 6, 2026 20:09
@Kureev Kureev added this pull request to the merge queue May 6, 2026
Merged via the queue into main with commit d33e9b2 May 6, 2026
90 checks passed
@Kureev Kureev deleted the kureev/MUSD-741-743-money-home-header branch May 6, 2026 21:12
@github-actions github-actions Bot locked and limited conversation to collaborators May 6, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.77.0 Issue or pull request that will be included in release 7.77.0 label May 6, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-7.77.0 Issue or pull request that will be included in release 7.77.0 size-L team-earn

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants